<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-课堂作业'"> </Breadcrumb>
        <RouterTabs
          :list="routerList"
          :current="tabbarType"
          @change="tabbarChange"
        >
        </RouterTabs>
        <view class="content">
          <view class="scroll">
            <view class="list" v-if="classWorklist.length > 0">
              <view
                class="item"
                v-for="(item, index) in classWorklist"
                :key="index"
              >
                <view class="title">
                  {{ item.gradeName }}>{{ item.bookEdition }}>{{
                    item.bookYear
                  }}
                </view>
                <view class="box" v-if="item.list.length > 0">
                  <view
                    class="section"
                    v-for="(element, i) in item.list"
                    :key="i"
                  >
                    <view class="section_title">
                      单元：{{ element.chapterName }}
                    </view>
                    <view class="info">
                      <view class="time">
                        <view class="time_content">
                          <text>开始：</text>
                          <text>{{ element.createTime }}</text>
                        </view>
                        <view class="time_content">
                          <text>完成：</text>
                          <text v-if="element.finishTime">
                            {{ element.finishTime }}
                          </text>
                          <text v-else>无</text>
                        </view>
                      </view>
                      <view class="status">
                        <text>{{ element.studyStatus }}</text>
                      </view>
                    </view>
                    <view class="progress">
                      <u-line-progress
                        active-color="#ffe58f"
                        :percent="
                          parseInt((element.sort / element.total) * 100)
                        "
                      ></u-line-progress>
                    </view>
                    <view class="button">
                      <template v-if="element.status === 0">
                        <view
                          class="button_content button1"
                          @click="startWork(element)"
                        >
                          <text>开始作业</text>
                        </view>
                      </template>
                      <template v-if="element.status === 1">
                        <view
                          class="button_content button2"
                          @click="continueWork(element)"
                        >
                          <text>继续作业</text>
                        </view>
                      </template>
                      <template v-if="element.status === 2">
                        <view
                          class="button_content button3"
                          @click="startReview(element)"
                        >
                          <text>开始复习</text>
                        </view>
                        <view
                          class="button_content button4"
                          @click="studyReport(element)"
                        >
                          <text>作答报告</text>
                        </view>
                      </template>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="default" v-else>
              <image
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/classWork_default.png"
                mode="widthFix"
              ></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getWordReadList,
  getWordChooseReport,
  getWordPassList,
  getListeningEnglishList,
  getListeningChineseList,
  getSpokenList,
} from "@/api/classWork";
export default {
  components: {},
  data() {
    return {
      routerList: [
        {
          name: "单词领读",
        },
        {
          name: "单词速记",
        },
        {
          name: "单词闯关",
        },
        {
          name: "句子听选",
        },
        {
          name: "句子跟读",
        },
        {
          name: "句子拼写",
        },
      ],
      classWorklist: [],
      tabbarType: 0,
    };
  },
  onLoad() {
    this.init();
  },
  methods: {
    init() {
      // default
      this.tabbarChange();
    },
    tabbarChange(type) {
      if (type === this.tabbarType) return;
      if (type !== undefined) {
        this.tabbarType = type;
      }
      if (this.tabbarType === 0) {
        getWordReadList().then((res) => {
          this.classWorklist = res.data.records;
        });
      } else if (this.tabbarType === 1) {
        getWordChooseReport().then((res) => {
          this.classWorklist = res.data.records;
        });
      } else if (this.tabbarType === 2) {
        getWordPassList().then((res) => {
          this.classWorklist = res.data.records;
        });
      } else if (this.tabbarType === 3) {
        getListeningEnglishList().then((res) => {
          this.classWorklist = res.data.records;
        });
      } else if (this.tabbarType === 4) {
        getSpokenList().then((res) => {
          this.classWorklist = res.data.records;
        });
      } else if (this.tabbarType === 5) {
        getListeningChineseList().then((res) => {
          this.classWorklist = res.data.records;
        });
      }
    },
    startWork(element) {
      this.workMethod(element);
    },
    continueWork(element) {
      this.workMethod(element);
    },
    startReview(element) {
      this.workMethod(element);
    },
    studyReport(item) {
      uni.navigateTo({
        url: `/pages/classWork/classWorkReport?chapterId=${
          item.chapterId
        }&type=${this.tabbarType + 1}`,
      });
    },
    workMethod(element) {
      if (this.tabbarType === 0) {
        uni.navigateTo({
          url: `/pages/classWork/classWorkRead/ClassWorkReadDetail?chapterId=${element.chapterId}`,
        });
      } else if (this.tabbarType === 1) {
        uni.navigateTo({
          url: `/pages/classWork/classWorkNotes/classWorkNotesDetail?chapterId=${element.chapterId}`,
        });
      } else if (this.tabbarType === 2) {
        uni.navigateTo({
          url: `/pages/classWork/classWorkPass/classWorkPassDetail?chapterId=${element.chapterId}`,
        });
      } else if (this.tabbarType === 3) {
        uni.navigateTo({
          url: `/pages/classWork/classWorkChoice/classWorkChoiceListen?chapterId=${element.chapterId}`,
        });
      } else if (this.tabbarType === 4) {
        uni.navigateTo({
          url: `/pages/classWork/classWorkSpoken/classWorkSpokenListen?chapterId=${element.chapterId}`,
        });
      } else if (this.tabbarType === 5) {
        uni.navigateTo({
          url: `/pages/classWork/classWorkTranslation/classWorkTranslationListen?chapterId=${element.chapterId}`,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./classWork";
</style>
